#@weiXinLayout("购物车")

#define weiXinMain()
#@navBar("购物车","")
<div class="weui-panel weui-panel_access" style="margin-top: 0px;margin-bottom: 45px;">
    #if(cartList.size()>0)
    <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__bd" >
            <h4 class="weui-media-box__title">收货地址</h4>
            #if(receiver??)
            <p class="weui-media-box__desc receiver" id="name">#(receiver.name??'') #(receiver.mobile??'')</p>
            <p class="weui-media-box__desc receiver" id="address">#(receiver.area_detail??'')</p>
            <input type="hidden" id="receiverId" value="#(receiver.id??'')">
            #else
            <p class="weui-media-box__desc empty-receiver" style="padding: 5px;color:#9d9d9d;text-align: center">+点我设置默认地址</p>
            #end
        </div>
    </a>
    #end
    <div class="weui-panel__hd" style="display: flex;justify-content: space-between;align-items: center">
        <span>购物清单 ( 注：总价不含运费 )</span>
        #if(cartList.size()>0)
        <div class="del-Btn">删除</div>
        #end
    </div>
    <div class="weui-panel__bd" id="content">
        #--
        <div class="weui-cells weui-cells_checkbox">
			      <label class="weui-cell weui-check__label" for="s11">
			        <div class="weui-cell__hd">
			          <input type="checkbox" class="weui-check" name="checkbox1" id="s11">
			          <i class="weui-icon-checked"></i>
			        </div>
			        <div class="weui-cell__bd">
			          <p>standard is dealt for u.</p>
			        </div>
			      </label>
			      
			      <label class="weui-cell weui-check__label" for="s12">
			        <div class="weui-cell__hd">
			          <input type="checkbox" class="weui-check" name="checkbox1" id="s12">
			          <i class="weui-icon-checked"></i>
			        </div>
			        <div class="weui-cell__bd">
			          <p>standard is dealt for u.</p>
			        </div>
			      </label>
		</div>
		--#
        #for(x:cartList)
        	<div class="cart-item"  >
	        	<div class=" weui-cells_checkbox cart-product-item" style="display:inline-flex">
				      <label class="weui-cell weui-check__label" for="s#(for.index)">
					        <div class="weui-cell__hd">
					          <input type="checkbox" value="#(x.id)" class="weui-check" name="checkbox1" id="s#(for.index)">
					          <i class="weui-icon-checked"></i>
					        </div>
					  </label>
				      <div style="display: flex;">
	                    <div class="weui-media-box__hd">
	                        <img class="weui-media-box__thumb" src="#(x.cover??'')" width="70"  style="padding: 5px; ">
	                    </div>
	                    <div class="weui-media-box__bd">
	                        <h4 class="weui-media-box__title">#(x.name??'')</h4>
	                        <p class="weui-media-box__desc">#(x.desc??'')</p>
	                        <p class="weui-media-box__desc"><span class="price">￥#(x.price??'')</span><span class="status">#(x.is_post??'')</span> </p>
	                        <p>
	                            <div class="weui-count">
	                                <a class="weui-count__btn weui-count__decrease"></a>
	                                <input class="weui-count__number" type="number" value="#(x.num??'')" readonly data-id="#(x.product_id??'')"  data-item-price="#(x.price??'')">
	                                <a class="weui-count__btn weui-count__increase"></a>
	                            </div>
	                        </p>
	                    </div>
	                </div>
				</div>
			</div>
	            #--
	            <div class="cart-item" >
	                <div class="weui-cells_checkbox cart-product-item">
	                    <div class="weui-cell__hd">
	                    <label for="item#(for.index)">
	                        <input type="checkbox" value="#(x.id)" class="weui-check" name="checkbox1" id="item#(for.index)">
	                        <i class="weui-icon-checked"></i>
	                    </label>
	                    </div>
	                </div>
	                <div style="display: flex;">
	                    <div class="weui-media-box__hd">
	                        <img class="weui-media-box__thumb" src="#(x.cover??'')" width="70"  style="padding: 5px; ">
	                    </div>
	                    <div class="weui-media-box__bd">
	                        <h4 class="weui-media-box__title">#(x.name??'')</h4>
	                        <p class="weui-media-box__desc">#(x.desc??'')</p>
	                        <p class="weui-media-box__desc"><span class="price">￥#(x.price??'')</span><span class="status">#(x.is_post??'')</span> </p>
	                        <p>
	                            <div class="weui-count">
	                                <a class="weui-count__btn weui-count__decrease"></a>
	                                <input class="weui-count__number" type="number" value="#(x.num??'')" readonly data-id="#(x.product_id??'')"  data-item-price="#(x.price??'')">
	                                <a class="weui-count__btn weui-count__increase"></a>
	                            </div>
	                        </p>
	                    </div>
	                </div>
            </div>
            --#
        #else
            <div class="no-data">购物车里暂无任何相关信息</div>
        #end
        #if(cartList.size()>0)
        <div class="weui-cells">
            <a class="weui-cell weui-cell_access" href="javascript:;" >
                <div class="weui-cell__bd">
                    <p>配送方式</p>
                </div>
                <div class="weui-cell__ft">
                    <input id="deliveryType" value="暂为选择" class="weui-input" readonly="readonly"/>
                    <input type="hidden" id="deliveryTypeHidden">
                </div>
            </a>
        </div>
        #end
    </div>
</div>
<div class="weui-tab">
    <div class="weui-tabbar tab-bar-fixbottom" style="display: flex;justify-content: space-between">
        <div class="weui-cells_checkbox totalFee">
            <div class="tel">
                <label for="totalFeeCheckBox">
                    <input type="checkbox"  class="weui-check" name="checkbox1" id="totalFeeCheckBox">
                    <i class="weui-icon-checked"></i>
                </label>
                <input type="hidden" id="productIds">
                全选  ￥<span id="totalFee">0</span>
            </div>
        </div>
        <div class="orderBtnContainer"id="submitBtn">立即结算</div>
        #(token??'')
    </div>
</div>

<div id="pop-up" class="weui-popup__container">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="weui-panel weui-panel_access" style="margin-top: 0px;">
            <div class="weui-panel__bd" >
            #for(x:receivers)
                <a href="javascript:void(0);" data-name="#(x.name??'')" data-id="#(x.id)" data-mobile=" #(x.mobile??'')" data-address="#(x.area_detail??'')" class="weui-media-box weui-media-box_appmsg receiver-item">
                    <div class="weui-media-box__bd" >
                        <h4 class="weui-media-box__title" >#(x.name??'')</h4>
                        <p class="weui-media-box__desc">#(x.mobile??'')</p>
                        <p class="weui-media-box__desc">#(x.area_detail??'')</p>
                    </div>
                </a>
            #end
            </div>
        </div>
    </div>
</div>
#end

#define weiXinCss()
<style>
    .orderBtnContainer{
        padding: 10px;
        background-color: #e2541f;
        color: white;
        width: 100px;
        text-align: center;
    }
    .tel{
        font-weight: bolder;
        font-size:18px ;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #e2541f;
    }

    .price{
        font-weight: bolder;
        font-size:18px ;
        color: #e2541f;
    }

    .cart-item,.totalFee{
        display: flex;
        flex-direction: row;
        padding:10px;
        align-items: center;
    }

    .receiver{
        font-weight: bolder;
        color:black ;
        font-size: 16px;
    }

    .del-Btn{
        border-radius: 5px;
        border: 1px solid #e2541f;
        padding: 5px;
        color: #e2541f;
    }
</style>
#end

#define weiXinJs()
<script type="text/x-mustache" id="template">
    {{#items}}

    {{/items}}
</script>
<script src="#(contextPath)/assets/lib/cart/CartUtils.js"></script>
<script>
    $(document).ready(function(){
        function initData() {
            var config = {
                "url": "#(contextPath)/weixin/cart/ajaxCartList",
                "data": {},
                "successCallBack": function (resp) {
                    var temp = $("#template").html();
                    var content = Mustache.render(temp, {items: resp.data});
                    $("#content").html(content);
                }
            }
            // var ajax = new AjaxUtils(config);
            // ajax.executeRequest();
        }

        $("#content").on('click','.weui-media-box',function(){
            var id =$(this).attr("data-id");
            //window.location.href="#(contextPath)/weixin/product/shopDetail?id="+id;
        });

        $(".empty-receiver").click(function(){
            $.confirm({
                "title":"温馨提示",
                "text":"系统即将跳转到设置默认收货地址界面，是否继续？",
                "onOK":function () {
                    window.location.href="#(contextPath)/weixin/receiver/addReceiver?isReturn=1";
                }
            })
        });


        $(".receiver").click(function(){
            $("#pop-up").popup();
        });

        $(".receiver-item").click(function(){
            var name = $(this).attr("data-name");
            var mobile = $(this).attr("data-mobile");
            var address = $(this).attr("data-address");
            var receiverId = $(this).attr("data-id");
            $("#name").html(name+" "+mobile);
            $("#address").html(address);
            $("#receiverId").val(receiverId);
            $.closePopup()
        })

        $("#submitBtn").click(function(){
            $.confirm({
                "title":"系统消息",
                "text":"确定要进行当前操作么？",
                "onOK":function () {
                    var receiverId=$("#receiverId").val();
                    var deliveryType=$("#deliveryTypeHidden").val();
                    var ids = $("#productIds").val();
                    if(receiverId==""){
                        $.alert("请设置收货地址");
                        return;
                    }

                    if(deliveryType==""){
                        $.alert("请选择配送方式");
                        return;
                    }
                    
                    if(ids==""){
                        $.alert("请选择你需要购买的商品");
                        return;
                    }

                    var config = {
                        "url": "#(contextPath)/weixin/order/generatorOrder",
                        "data": {
                        	"ids":ids,
                            receiverId:receiverId,
                            "token":$("#token").val(),
                            "deliveryType":deliveryType
                        },
                        "successCallBack": function (resp) {
                            if(resp.result){
                                $.alert("成功结算，点击确定跳转至订单支付页面",function () {
                                    window.location.href="#(contextPath)/weixin/order/confirmPayOrder?id="+resp.data;
                                })
                            }else{
                                $.alert(resp.data,function () {
                                    window.location.href="#(contextPath)/weixin/market"
                                })
                            }
                        }
                    }
                    var ajax = new AjaxUtils(config);
                    ajax.executeRequest();
                },
                "onCancel":function () {
                    
                }
            })
        });
        initData();

        var config={
            "isCheckAll":true,
            "increaseEventCallBack":function(productId){
                var config = {
                    "url": "#(contextPath)/weixin/cart/ajaxDoAddCart",
                    "data": {id:productId},
                    "successCallBack": function (resp) {
                        if(resp.result){

                        }
                    }
                }
                var ajax = new AjaxUtils(config);
                ajax.executeRequest();
            },
            "decreaseEventCallBack":function(productId){
                var config = {
                    "url": "#(contextPath)/weixin/cart/ajaxDoDecreaseCart",
                    "data": {id:productId},
                    "successCallBack": function (resp) {
                        if(resp.result){

                        }
                    }
                }
                var ajax = new AjaxUtils(config);
                ajax.executeRequest();
            },
        }
        var cart = new CartUtils(config);
        cart.initCart();

        $(".del-Btn").click(function(){
            $.confirm({
                "title":"系统提示",
                "text":"确定要删除当前选中物品么?",
                "onOK":function(){
                    var ids = $("#productIds").val();
                    if(ids==""){
                        $.alert("请选择你需要删除的物品！");
                        return;
                    }

                    var config = {
                        "url": "#(contextPath)/weixin/cart/delCartItem",
                        "data": {ids:ids},
                        "successCallBack": function (resp) {
                            if(resp.result){
                                $.alert(resp.data,function(){
                                    window.location.reload();
                                })
                            }else{
                                $.alert(resp.data);
                            }
                        }
                    }
                    var ajax = new AjaxUtils(config);
                    ajax.executeRequest();
                }
            })
        })

        $("#deliveryType").select({
            title: "选择快递配送方式",
            items: [
                {
                    title: "顺丰快递",
                    value: "1",
                },
                {
                    title: "圆通快递",
                    value: "2",
                },
                {
                    title: "中通快递",
                    value: "3",
                },
                {
                    title: "申通快递",
                    value: "4",
                },
                {
                    title: "百世快递",
                    value: "5",
                },
            ],
            onClose:function(){
                var deliveryType = $("#deliveryType").attr("data-values");
                $("#deliveryTypeHidden").val(deliveryType);
            }
        })
    })
</script>
#end